<template>
	<view class="container">
		<navbar :config="config"></navbar>
		<view class="list" v-if="billRefillCardList.length>0">
			<view  class="item" v-for="(item,index) in billRefillCardList" :key="index">
				<view class="u-flex-center-sb u-1A1A1A">
					<view class="u-font28">{{item.mode}}</view>
					<view class="u-font26">{{item.billType==0?'-':'+'}} {{item.entryValue}}元</view>
				</view>
				<view class="u-999 u-font24 u-mt10">{{item.formatCreateTimeMillis}}</view>
			</view>
		</view>
		<!-- 没有数据 -->
		<loadMore v-if="billRefillCardList.length>0" :status="status"></loadMore>
		<nodata v-else :config="{top:5,content:'暂无交易明细~'}"></nodata>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '交易明细',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: '#1A1A1A'
				},
				billRefillCardList:[],
				params:{
					page:1,
					limit:20,
				},
				status:"more",
				totalPage:null,
				currPage:null
			}
		},
		onLoad() {
			this.getList()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.params.page=1
			this.billRefillCardList=[]
			this.getList()
		},
		//上拉加载
		onReachBottom(e) {
			if(this.totalPage<=this.currPage){
				this.status="noMore"
			}else{
				this.status="more"
				this.params.page++
				this.getList()
			}
		},
		methods:{
			getList(){
				this.$http.get('/bill/refillCard/page',this.params).then(res => {
					if(res&&res.code==200){
						console.log(res.page.list)
						uni.stopPullDownRefresh()
						this.billRefillCardList = this.billRefillCardList.concat(res.page.list) 
						this.totalPage = res.page.totalPage
						this.currPage = res.page.currPage
						
						if(this.totalPage<=this.currPage){
							this.status="noMore";
						}else{
							this.status = "more"
						}
						// if(this.billRefillCardList.length==0){
						// 	this.noData = true
						// }else{
						// 	this.noData = false
						// }
					}
					})
			}
		}
		}
</script>

<style lang="scss">
	.item{
		padding: 20rpx 30rpx 24rpx;
		border-bottom: 2rpx solid #eee;
	}
</style>
